<template>
  <div>
    <img src="@/assets/img/classroom1.png" alt="" style="padding-left: 180px">
  </div>
  <div class="el-news">
    <div class="el-breadcrumb">
      <el-breadcrumb style="line-height: 64px" :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">学院概况</el-breadcrumb-item>
        <el-breadcrumb-item>工作人员</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="article">
      <div>{{introTittle}}</div>
      <el-divider/>
      <div v-html="introContent"></div>
    </div>
  </div>
</template>

<script lang="js">
import { ArrowRight } from '@element-plus/icons-vue'
import {useRoute} from "vue-router"
import {fetchSingleIntro} from '@/api/intro'
import {onMounted, ref} from "vue"


export default {
  name: "intro",
  setup(){
    let route = useRoute()
    const introContent = ref()
    const introTittle = ref()
    const nId = 3
    onMounted(async () => {
      fetchSingleIntro(nId).then((response)=>{
        introContent.value = response.data.data.introContent
        introTittle.value = response.data.data.introName
      })
    })
    return{
      ArrowRight,
      introContent,
      introTittle
    }
  }
}

</script>

<style scoped lang="less">
.el-news{
  margin-bottom: 80px;
  margin-left: 300px;
  margin-right: 400px;
  .el-breadcrumb{
    width: 870px;
    height: 64px;
  }
}
</style>
